<template>
  <div>
    <div class="crumbs">
      <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="关键字">
          <el-input v-model="formInline.keywords" placeholder="请输入……" clearable></el-input>
        </el-form-item>
        <el-form-item label="发货状态">
          <el-select v-model="formInline.status" clearable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('form')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="120px"></el-table-column>
      <el-table-column prop="user_id" label="申请人ID"></el-table-column>
      <el-table-column prop="pick_up_code" label="提货单号"></el-table-column>
      <el-table-column prop="certificate_name" label="证书名称"></el-table-column>
      <el-table-column prop="waybill_number" label="运单号"></el-table-column>
      <el-table-column prop="create_time" label="申请提货时间"></el-table-column>
      <el-table-column prop="pick_up_time" label="收货时间" :formatter="ptimeFormat"></el-table-column>
      <el-table-column prop="shipments_time" label="发货时间" :formatter="stimeFormat"></el-table-column>
      <el-table-column prop="transfer_status" label="发货状态" :formatter="transferFormat"></el-table-column>
      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <el-button size="small" @click="see(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="small" v-if="scope.row.transfer_status === 0" @click="shipments(scope.$index, scope.row)">证书发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change ="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page="textData.current_page"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        formInline: {
          keywords: '',
          status: ''
        },
        options: [{
          value: '',
          label: '全部'
        }, {
          value: 1,
          label: '已发货'
        }, {
          value: 0,
          label: '未发货'
        }]
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.certificate.pickUpList,
        textData: state => state.certificate.pageData
      })
    },
    created () {
      this.pickUplist()
    },
    methods: {
      // 获取证书提货单列表
      async pickUplist () {
        let payload = {
          page: this.textData.current_page,
          listRows: this.textData.per_page,
          keywords: this.$route.query.keywords,
          transfer_status: this.$route.query.status
        }
        await this.$store.dispatch('certificate/pickupList', payload)
      },
      onSearch (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$router.push({path: 'certificatepickup', query: {keywords: this.formInline.keywords, status: this.formInline.status}})
            this.pickUplist()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.pickUplist()
      },
      see (index, row) {
        this.$store.commit('certificate/CERTIFICATE_SAVE_DATA', row)
        this.$router.push('/certificate/ladinginfo')
      },
      shipments (index, row) {
        this.$router.push({name: 'Shipments', params: {id: row.certificate_id}})
      },
      transferFormat: function (value) {
        if (value.transfer_status === 1) {
          return '已发货'
        }
        return '未发货'
      },
      ptimeFormat: function (value) {
        if (value.pick_up_time === '1970-01-01 08:00:00') {
          return '—— ——'
        }
        return value.pick_up_time
      },
      stimeFormat: function (value) {
        if (value.shipments_time === '1970-01-01 08:00:00') {
          return '—— ——'
        }
        return value.shipments_time
      }
    }
  }
</script>
